<template>
	<div>
		<a-modal v-model="showModal" @ok="confirmOk" @cancel="cancel" :title="titles" width="70%">
			<a-spin :spinning="loading">
				<a-form :form="form">
					<a-row :gutter="[24, 0]">
						<a-col :span="12">
							<a-form-item class="mb-15" label="真实姓名" :label-col="labelCol" :wrapper-col="wrapperCol">
								<a-input disabled placeholder="请输入" v-decorator="[
					  'name',
					  {
					    rules: [{ required: true, message: '请输入', whitespace: true }]
					  }
					]" maxLength="30"></a-input>
							</a-form-item>
						</a-col>
						<a-col :span="12">
							<a-form-item class="mb-15" label="手机号" :label-col="labelCol" :wrapper-col="wrapperCol">
								<a-input disabled placeholder="请输入" v-decorator="[
					  'mobile',
					  {
					    rules: [{ required: true, message: '请输入', whitespace: true }]
					  }
					]" maxLength="30"></a-input>
							</a-form-item>
						</a-col>
					</a-row>
					<a-row :gutter="[24, 0]">
						<a-col :span="12">
							<a-form-item class="mb-15" label="头像" :label-col="labelCol" :wrapper-col="wrapperCol">
								<PreviewImage :showUpload="isShow" class="mt-12" :is-preview="false" :scene="8"
									:show-upload="formgetFileLength(`avatar`) < 1"
                              accept=".png,.jpg"
									 v-decorator="[
								  `avatar`,
								  {
								    rules: [{ required: true, message: '请上传图片', type: 'array' }],
								    initialValue: []
								  }
								]" />
							</a-form-item>
							</a-form-item>
						</a-col>
						<a-col :span="12">
							<a-form-item class="mb-15" label="资质" :label-col="labelCol" :wrapper-col="wrapperCol">
								<PreviewImage disabled :showUpload="isShow" class="mt-12" :is-preview="false" :scene="8"
									:show-upload="formgetFileLength(`licenseUrl`) < 1"
                              accept=".png,.jpg"
									 v-decorator="[
					  `licenseUrl`,
					  {
					    rules: [{ required: true, message: '请上传图片', type: 'array' }],
					    initialValue: []
					  }
					]" />
							</a-form-item>
						</a-col>
					</a-row>

					<a-row :gutter="[24, 0]">
						<a-col :span="12">
							<a-form-item class="mb-15" label="身份证号" :label-col="labelCol" :wrapper-col="wrapperCol">
								<a-input disabled placeholder="请输入" v-decorator="[
					  'identityId',
					  {
					    rules: [{ required: true, message: '请输入', whitespace: true }]
					  }
					]" maxLength="30"></a-input>
							</a-form-item>
						</a-col>
						
					</a-row>
					<a-row :gutter="[24, 0]">
						<a-col :span="12">
							<a-form-item class="mb-15" label="年龄" :label-col="labelCol" :wrapper-col="wrapperCol">
								<a-input type="number" placeholder="请输入" disabled v-decorator="[
					  'age',
					  {
					    rules: [{type: 'any',message: '请输入', whitespace: true }]
					  }
					
					]" maxLength="30"></a-input>
							</a-form-item>
						</a-col>
						<a-col :span="12">
							<a-form-item class="mb-15" label="性别" :label-col="labelCol" :wrapper-col="wrapperCol">
								<a-select class="flex-1" @change="changeSelect" placeholder="请选择" disabled
									v-decorator="['sex', { rules: [{ required: true, message: '请选择' }] }]">
									<a-select-option :value="1">男</a-select-option>
									<a-select-option :value="2">女</a-select-option>
								</a-select>
							</a-form-item>
						</a-col>
					</a-row>

	<a-row :gutter="[24, 0]">
						<a-col :span="12">
							<a-form-item class="mb-15" label="专业" :label-col="labelCol" :wrapper-col="wrapperCol">
								<a-input disabled placeholder="请输入" v-decorator="[
					  'subject',
					  {
					    rules: [{ message: '请输入', whitespace: true }]
					  }
					]" maxLength="30"></a-input>
							</a-form-item>
						</a-col>
						<a-col :span="12">
							<a-form-item class="mb-15" label="职称" :label-col="labelCol" :wrapper-col="wrapperCol">
								<a-input disabled placeholder="请输入" v-decorator="[
					  'title',
					  {
					    rules: [{ message: '请输入', whitespace: true }]
					  }
					]" maxLength="30"></a-input>
							</a-form-item>
						</a-col>
					</a-row>
          <a-row :gutter="[24, 0]">
						<a-col :span="12">
							<a-form-item class="mb-15" label="毕业院校" :label-col="labelCol" :wrapper-col="wrapperCol">
								<a-input disabled placeholder="请输入" v-decorator="[
					  'graduated',
					  {
					    rules: [{ message: '请输入', whitespace: true }]
					  }
					]" maxLength="30"></a-input>
							</a-form-item>
						</a-col>
						<a-col :span="12">
							<a-form-item class="mb-15" label="执业编号" :label-col="labelCol" :wrapper-col="wrapperCol">
								<a-input disabled placeholder="请输入" v-decorator="[
					  'licenseNo',
					  {
					    rules: [{ message: '请输入', whitespace: true }]
					  }
					]" maxLength="30"></a-input>
							</a-form-item>
						</a-col>
					</a-row>
           <a-row :gutter="[24, 0]">
						<a-col :span="12">
							<a-form-item class="mb-15" label="标签" :label-col="labelCol" :wrapper-col="wrapperCol">
								<a-input disabled placeholder="请输入" v-decorator="[
					  'labelNames',
					  {
					    rules: [{ message: '请输入', whitespace: true }]
					  }
					]" maxLength="30"></a-input>
							</a-form-item>
						</a-col>
						<a-col :span="12">
							<a-form-item class="mb-15" label="擅长领域" :label-col="labelCol" :wrapper-col="wrapperCol">
								<a-input disabled placeholder="请输入" v-decorator="[
					  'skillingRemark',
					  {
					    rules: [{ message: '请输入', whitespace: true }]
					  }
					]" maxLength="30"></a-input>
							</a-form-item>
						</a-col>
					</a-row>
  <a-row :gutter="[24, 0]">
						<a-col :span="12">
							<a-form-item class="mb-15" label="个人简介" :label-col="labelCol" :wrapper-col="wrapperCol">
								<a-textarea placeholder="请输入" v-decorator="[
						        'introduction',
						        {
						          rules: [{  message: '请输入', whitespace: true }]
						        }
						      ]" maxLength="300"></a-textarea>
							</a-form-item>
						</a-col>
					</a-row>




					<a-row :gutter="[24, 0]">
						<a-col :span="12">
							<a-form-item class="mb-15" label="是否通过" :label-col="labelCol" :wrapper-col="wrapperCol">
								<a-radio-group v-decorator="[
					    'approveStatus',
					    {
					      rules: [{ type: 'any', required: true, message: '请输入', whitespace: true }]
					    }
					  ]">
									<a-radio :style="radioStyle" :value="1">
										通过
									</a-radio>
									<a-radio :style="radioStyle" :value="2">
										拒绝
									</a-radio>
								</a-radio-group>
							</a-form-item>
						</a-col>
						<a-col :span="12">
							<a-form-item class="mb-15" label="审核描述" :label-col="labelCol" :wrapper-col="wrapperCol">
								<a-textarea placeholder="请输入" v-decorator="[
                    'admark',
                    {
                      rules: [{ required: false, message: '请输入', whitespace: true }]
                    }
                  ]" maxLength="300"></a-textarea>
							</a-form-item>
						</a-col>
					</a-row>
				</a-form>
			</a-spin>
		</a-modal>
	</div>
</template>
<script>
	import {
		quillEditor
	} from 'vue-quill-editor'
	import 'quill/dist/quill.core.css'
	import 'quill/dist/quill.snow.css'
	import 'quill/dist/quill.bubble.css'
	import {
		get
	} from 'lodash'
	import moment from 'moment/moment'
  import {
    approveDoc,
    getDoctorDept
  } from '@/api/newPet'
  import {
    doctordetail
  } from '@/api/index'
	export default {
		data() {
			return {
				loading: false,
				isShow: true,
				labelCol: {
					span: 8
				},
				content: '<p>Hello World!</p>',

				editorOption: {
					placeholder: '请输入',
					theme: 'snow',
					modules: {
						toolbar: {
							container: [
								['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
								['blockquote', 'code-block'], // 引用  代码块
								[{
									header: 1
								}, {
									header: 2
								}], // 1、2 级标题
								[{
									list: 'ordered'
								}, {
									list: 'bullet'
								}], // 有序、无序列表
								[{
									script: 'sub'
								}, {
									script: 'super'
								}], // 上标/下标
								[{
									indent: '-1'
								}, {
									indent: '+1'
								}], // 缩进
								// [{ direction: 'rtl' }], // 文本方向
								[{
									size: ['12', '14', '16', '18', '20', '22', '24', '28', '32', '36']
								}], // 字体大小
								[{
									header: [1, 2, 3, 4, 5, 6]
								}], // 标题
								[{
									color: []
								}, {
									background: []
								}], // 字体颜色、字体背景颜色
								// [{ font: ['songti'] }], // 字体种类
								[{
									align: []
								}], // 对齐方式
								['clean'], // 清除文本格式
								['image'] // 链接、图片，需要视频的可以加上video
							]
						}
					}
				},
				data: [{
						name: '规格1',
						img: '',
						num: 1,
						price: 0
					},
					{
						name: '规格1',
						img: '',
						num: 1,
						price: 0
					}
				],
				columns: [{
						title: '规格名称',
						dataIndex: 'name',
						align: 'center',
						width: 140,
						scopedSlots: {
							customRender: 'name'
						}
					},
					{
						title: '规格图片',
						dataIndex: 'img',
						width: 120,
						align: 'center',
						scopedSlots: {
							customRender: 'img'
						}
					},
					{
						title: '规格库存',
						dataIndex: 'num',
						align: 'center',
						width: 70,
						scopedSlots: {
							customRender: 'num'
						}
					},
					{
						title: '规格价格（元）',
						dataIndex: 'price',
						align: 'center',
						width: 70,
						scopedSlots: {
							customRender: 'price'
						}
					},
					{
						title: '老用户专享最高可售库存',
						dataIndex: 'msNum',
						align: 'center',
						width: 110,
						scopedSlots: {
							customRender: 'price'
						}
					},
					{
						title: '老用户最低价格（元）',
						dataIndex: 'msPrice',
						align: 'center',
						width: 110,
						scopedSlots: {
							customRender: 'price'
						}
					},
					{
						title: '操作',
						fixed: 'right',
						dataIndex: 'action',
						width: 110,
						scopedSlots: {
							customRender: 'action'
						},
						align: 'center'
					}
				],

				wrapperCol: {
					span: 16
				},
				details: {},
				showModal: false,
				titles: '新增',
				info: {},
				form: this.$form.createForm(this)
			}
		},
		computed: {},
		watch: {},
		async created() {},
		components: {
			quillEditor
		},
		methods: {
			onEditorBlur(quill) {
				console.log('editor blur!', quill)
			},
			// 获得焦点事件
			onEditorFocus(quill) {
				console.log('editor focus!', quill)
			},
			// 准备富文本编辑器
			onEditorReady(quill) {
				console.log('editor ready!', quill)
			},
			// 内容改变事件，只需要这一个方法就够了
			onEditorChange({
				quill,
				html,
				text
			}) {
				console.log('editor change!', quill, html, text)
				this.content = html
			},
			formgetFileLength(type) {
				//获取图片
				return get(this.form.getFieldValue(type), 'length') || 0
			},
			formuploadSuccess(data, type) {
				this.form.setFieldsValue({
					images: [...this.form.getFieldValue(type), data.path]
				})
			},
			changeSelect(e) {
				console.log(e)
			},
			onChange(e) {
				console.log(e.target.value)
			},
			cancel() {
				this.form.resetFields()
				this.showModal = false
			},
			confirmOk() {
				this.form.validateFields((err, values) => {
					if (!err) {
						// this.loading = true
						const {
							info
						} = this
						if (values.time) {
							values.timeStart = this.$utils.getStartTime(values.time[0])
							values.timeEnd = this.$utils.getEndTime(values.time[1])
						}
						let data = {
							id: info && info.id ? info.id : undefined,
							...this.$utils.trimValue(values),
						}
						console.log('data', values)
						approveDoc(data)
							.then(() => {
								this.$message.success('审核成功')
								this.$emit('upload')
								this.cancel()
							})
							.finally(() => {
								this.loading = false
							})
					}
				})
			},
			getData() {
				this.loading = true
				deductionDetail({
						id: 1
					})
					.then(data => {
						this.details = data
					})
					.finally(() => (this.loading = false))
			},
      async open(data) {
        if (data.id) {
          this.titles = '修改'
          const res = await doctordetail({
            id: data.id
          })
          data = res
          this.info = res
        } else {
          this.titles = '新增'
        }
        this.get_class()
        this.showModal = true
        // images:['https://img2.baidu.com/it/u=1906732828,3160455141&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666']
        this.$nextTick(() => {
          this.form.setFieldsValue({
            ...data,

            avatar: [data.avatar],

            licenseUrl: [data.licenseUrl],

            birthday: data.birthday?moment(data.birthday).format('YYYY-MM-DD'):'',

          })
        })

      },
      get_class(){
        getDoctorDept()
      }
		}
	}
</script>
<style lang="less" scoped>
	/deep/ .ant-form-item-label {
		// width: 100px;
	}
</style>